<template>
  <el-drawer title="导入JSON"
             :visible.sync="drawer.visible"
             size="50%"
             :before-close="beforeClose"
             append-to-body
             destroy-on-close
  >
    <monaco-editor
      ref="monacoEditor"
      v-model="formConfig"
      keyIndex="import"
      height="82%"></monaco-editor>
    <div class="afd-drawer-foot">
      <el-button size="default"
                 type="primary"
                 @click="handleImportJsonSubmit">确定
      </el-button>
      <el-button size="default"
                 type="danger"
                 @click="beforeClose">取消
      </el-button>
    </div>
  </el-drawer>
</template>

<script>
import MonacoEditor from "../utils/monaco-editor";
import {deepClone} from "utils/util";


export default {
  name: "formDesignImportJson",
  components: {MonacoEditor},
  data() {
    return {
      drawer: {
        visible: false,
      },
      formConfig: {}
    }
  },
  methods: {
    show() {
      this.drawer.visible = true;
    },
    handleImportJsonSubmit() {
      let formConfig = this.$refs.monacoEditor._getValue();
      formConfig = deepClone(formConfig)
      let submit = {}
      submit.formConfig = formConfig;
      submit.isImportTable = false
      this.$emit("submit", formConfig, this.beforeClose)
    },
    beforeClose() {
      this.drawer.visible = false
      this.formConfig = {}
    }
  },
}
</script>

<style scoped>

</style>
